<template>
<div style="margin: 10px 60px">
  <el-drawer
      title="请您填写收件人详细信息"
      :visible.sync="drawer"
      :direction="direction" style="height: 1100px" flex>
    <div style="width: 500px; margin-left: 500px"  >
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" >
        <el-form-item label="收件人">
          <el-input v-model="formLabelAlign.consignee"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="formLabelAlign.tel"></el-input>
        </el-form-item>

        <el-button @click="open" type="primary"> 确认信息</el-button>
      </el-form>
    </div>


  </el-drawer>
  <el-table
      :data="tableData"
      stripe
      height="530"
      style="width: 100%">
    <el-table-column
        prop="ISBN"
        label="ISBN"
        width="180">
    </el-table-column>
    <el-table-column
        prop="bname"
        label="书籍名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="price"
        label="单价(单位:元)">
    </el-table-column>
    <el-table-column
        prop="num"
        label="购买数量">
      <template slot-scope="scope">
        <el-input-number  v-model="scope.row.quantity" @change="changeNum(scope.row.quantity)"  ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" @click="delCart(scope.row.id)">删除该商品</el-button></template>
    </el-table-column>
  </el-table>

  <div class="fixed">
  <el-card class="box-card" >
    <el-row :gutter="20">
      <el-col :span="18"><div style="color: red;font-weight: bold;font-size: x-large">购物车合计：{{totalPrice}}元</div></el-col>
      <el-col :span="6"><el-button type="primary" @click="buy">下单购买</el-button></el-col>
    </el-row>
  </el-card>
  </div>
</div>

</template>

<script>
import {mapMutations} from "vuex";
export default {
  name: "ShoppingCart",
  data() {
    return {
      tableData: this.$store.state.carts,
      numberValidateForm: {
        age: ''
      },
      drawer:false,
      direction: 'ttb',
      labelPosition: 'right',
      formLabelAlign: {
        tel:'',
        address:'',
        consignee:''
      }
    }
  },
  computed:{
    totalPrice(){
      return this.$store.getters.getTotalPrice;
    }
  },
  methods:{
    open() {
      this.$alert('按下确定按钮后将确认下单，请您再次检查信息', '下单', {
        confirmButtonText: '确定',
        callback: action => {
          let order= [];
          this.$store.state.carts.forEach(c=>{
            let o=c={...c,uname:this.$store.state.user.username}
            order.push(o)
          })
          let data={
            consignee:this.formLabelAlign.consignee,
            address:this.formLabelAlign.address,
            tel:this.formLabelAlign.tel,
            orderList:order
          }
          this.$axios.post('http://localhost:9090/detail/create',data).then(
              res=>{
                if(res.status==200){
                  this.drawer=false
                  this.$message('下单成功')
                  this.$store.commit("clearCart")
                  this.$router.push('home')
                }else {
                  this.$message({
                    type:'warning',
                    message:"下单失败"+res.msj
                  })
                }
              }
          )
          this.$message("xiadan"+action)
        }
      });
    },
    ...mapMutations(["delCart","addCart","changeNum"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    xiadan(){

    },
    buy(){
      if(this.$store.state.user.isLogin){
        //提交订单
        this.drawer = true
      }else{
        this.$confirm('您还未登录', '提示', {
          confirmButtonText: '登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下单'
          });
        });
      }
    }
  }

}
</script>

<style scoped>
.el-card {
  position:  fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100px;
  background: white;
}

</style>
